<template>
  <div class="box">
    <div class="login">
      <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-space>
          <el-input v-model="ruleForm.captcha" />
          <div @click="captchaFn">
            <img :src="captchaImg" alt="">
          </div>
        </el-space>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
// 导入接口
import { getcaptcha, loginApi} from '../api/login'
import { useRouter } from 'vue-router'
const router = useRouter()

const ruleFormRef = ref()

// 定义验证码图片
const captchaImg = ref('')
const key = ref('')
// 调用验证码接口
getcaptcha().then((res)=>{
  // console.log(res);
  captchaImg.value = res.data.img
  key.value = res.data.key
})
// 点击刷新验证码
const captchaFn = () => {
  getcaptcha().then((res)=>{
    captchaImg.value = res.data.img
    key.value = res.data.key
  })
}

// 定义表单数据
const ruleForm = reactive({
  username: '',
  password: '',
  captcha: '',
  key:'' 
})

// 自定义校验表单规则
const rules = reactive({
  username: [{ required: true, trigger: 'blur' }],
  password: [{ required: true, trigger: 'blur' }],
  captcha: [{ required: true, trigger: 'blur' }],
})

// 点击登录事件
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ruleForm.key = key.value
      // 调用登录接口传递数据
      loginApi(ruleForm).then((res)=>{
        console.log(res);
        console.log('登录参数',ruleForm)
        if(res.data.errNo == 0){
          // 登录成功后将后端返回的数据存储本地
          localStorage.setItem('jwt',res.data.context.jwt)
          localStorage.setItem('acl',JSON.stringify(res.data.context.acl))
          localStorage.setItem('username',ruleForm.username)
          // 跳转到首页
          router.push('/dashboard')
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// 点击重置事件
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang='scss' scoped>
.box{
  width: 100%;
  height:100%;
  background-image: url(../../public/img/peng.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
    align-items: center;
  .login{
    background-color: rgba(#747d8c, $alpha: 0.5);
    width: 500px;
    height: 250px;
    padding: 30px 0;
    margin-left: 150px;
    box-sizing:border-box ;

    .el-form{
      width: 400px;
    }
  }
}
</style>